<html>
    <head>
        <meta charset="utf-8" >
        <title>api 测试页面</title>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <button onclick="login()">登陆</button>
        <button onclick="register()">注册</button>
        <button onclick="goods()">商品查询普通方法</button>
        <button onclick="goodsByGql()">商品查询gql</button>
        <br>
        <br>
        <div style="display:flex;">
            <div style="flex:1">
                <input id="userid" />
                <button onclick="wshandle()">连接-长连接服务</button>
                <br>
                发送目标对象:<input id="to" value="ALL"/>
                <br>
                发送内容:<input id="msg" />
                <br>
                <button onclick="sendmsg()">发送消息</button>
            </div>
            <div style="flex:2" id="log">

            </div>
        </div>
    </body>
</html>

<script>
    const ip = "127.0.0.1"
    const port = 3000
    const baseurl = `http://${ip}:${port}`
    const wsurl = `ws://${ip}:${port}/ws`

    function myFetch(p,apiname,success_callback){
        $.ajax({
            type:'POST',
            url:baseurl+apiname,
            data:p,
            dataType:"json",
            // contentType:"application/json",
            contentType:"application/x-www-form-urlencoded",
            success:(data,status,config)=>{
                console.log(data)
                if(typeof(success_callback) === 'function'){
                    success_callback(data)
                }
            },
            error:(data,err)=>{
                console.log(err)
            }
        })
    }

    function login(){
        console.log("test login")
        /*
        1.xhrxmlhttp
        2.ajax refence jquery
        3.fetch
        4.axios
        */
        // fetch("http://127.0.0.1:3000/api/login",{
        //     body:JSON.stringify({id:1,pwd:2}),
        //     method:'POST',
        //     headers:{
        //         'Accept':'application/json',
        //         'Content-type':'application/json',
        //     }
        // })
        // .then(res => res.json())
        // .then(res => console.log(res))
        let p = {
            id:"zhang@mail.com",
            pwd:"000000"
        }
        
        myFetch(p,"/api/login")
    }

    function register(){
        let p = {"mail":"zhao@mail.com","username":"兆先生","pwd":"000000"}
        myFetch(p,"/api/register")
    }

    function goods(){
        let p = {
            "type":"03",
            "name":"",
            "desc":"7"
            }
        myFetch(p,"/api/goods")
    }

    function goodsByGql(){
        let p = {
            query:`
                {
                    goods(count:5,name:"1",desc:"2代"){
                        name
                        id
                        price
                        gooddesc 
                        type {
                            name
                        }
                    }
                    good(id:1) {
                        name
                        id
                        price
                        gooddesc
                        type {
                            dictid
                            name
                        }
                    }
                }
            `
        }
        myFetch(p,"/gql")
    }

    let ws = null

    function wshandle(){
        if (ws) {
            ws.onopen = ws.onclose = ws.onerror = ws.onmessage = null
            ws.close()
        }
        const userid = document.getElementById("userid").value
        ws = new WebSocket(`${wsurl}?userid=${userid}`);
        ws.onopen = function(){
            console.log("ws connected !")
            document.getElementById("log").innerHTML += "<div>连接成功</div>"
            ws.send(JSON.stringify({init:"增加一个新用户"}));
        }
        
        ws.onclose = function(){
            console.log("ws closed !")
            document.getElementById("log").innerHTML += "<div>断开连接</div>"
        }

        ws.onerror = function(e){
            console.log("ws error : ",e)
            document.getElementById("log").innerHTML += `<div>${e}</div>`
        }

        ws.onmessage = function(evt){
            console.log(evt.data)
            const obj = JSON.parse(evt.data)
            document.getElementById("log").innerHTML += `<div>${obj.from} 对 ${obj.to} 说: ${obj.msg}</div>`
        }
    }

    function sendmsg(){
        const from = document.getElementById("userid").value
        const to = document.getElementById("to").value
        const msg = document.getElementById("msg").value
        ws.send(JSON.stringify({
            from,
            to,
            msg
        }))
        document.getElementById("to").value = "ALL"
        document.getElementById("msg").value = ""
    }
</script>